﻿
@{
    ViewBag.Title = "我的订单";
    Layout = "~/Views/Shared/_UserLayout.cshtml";
}
@section Head{
    <link href="~/common/css/Orders.css" rel="stylesheet" type="text/css" />
    <link href="~/common/Threelinkage/layui/css/layui.css" rel="stylesheet" />
    <style>
        .order_info {
            background: #f2f2f2;
            height: 35px;
            line-height: 35px;
            font-size: 15px;
            color: #666;
        }
    </style>
}
<!--用户中心(收藏)-->
<div class="user_style clearfix" id="user">
    <div class="user_title"><em></em>用户中心</div>
    <div class="clearfix user">
        <!--左侧菜单栏样式-->
        @Html.Partial("~/Views/Shared/_PartialUserLeft.cshtml")
        <!--右侧内容样式-->
        <div class=" right_style r_user_style user_right">
            <div class="user_Borders clearfix">
                <div class="title_name">
                    <span class="name">用户订单</span>
                </div>
                <!--收藏样式-->
                <div class="Collect">



                    <form class="form" method="post">
                        <fieldset>


                            <!--产品列表-->
                            <div class="Product_List order_content">


                            </div>
                        </fieldset>
                    </form>

                    <div id="page" class="page"></div>

                </div>
            </div>
        </div>
    </div>
</div>

@section FooterScript{
    <script src="~/common/js/template-2.js"></script>
    <script src="~/common/Threelinkage/layui/layui.all.js"></script>

    <script id="order_template" type="text/html">
        {{each data as item}}
        <table style="margin-top:15px;">
            <thead>
                <tr class="order_info">
                    <td title="{{item.order.guid}}" style="padding-left:15px;">订单编号:{{item.order.guid.length > 12 ? item.order.guid.substring(0,12)+"...":item.order.guid}}&nbsp;&nbsp;&nbsp;下单时间:{{item.order.createDateTime}}</td>
                    <td>快递方式:{{item.order.express}}&nbsp;&nbsp;&nbsp;</td>
                    {{if item.order.completeAddress != null}}
                    <td colspan="2" title="{{item.order.completeAddress}}">收货地址:{{item.order.completeAddress.length > 12 ? item.order.completeAddress.substring(0,12)+"...":item.order.completeAddress}}</td>
                    {{else}}
                    <td colspan="2" title="{{item.order.completeAddress}}"></td>
                    {{/if}}
                    <td>订单状态:{{item.order.statusName}}</td>

                </tr>
                <tr class="title"><td class="name">(包含快递费，满68包邮)商品名称</td><td class="price">商品价格</td><td class="Quantity">购买数量</td><td class="Preferential">金额</td><td>(总金额:{{item.order.amount}})</td></tr>
            </thead>
            <tbody>

                {{each item.orderRecord as orderRe i}}
                <tr>
                    <td class="Product_info">
                        <a target="_blank" href="/Home/Detail?goodid={{orderRe.goodId}}"><img src="http://static.amortal.top/{{ item.imgSrcs[i] }}?imageView2/2/w/200/h/200/interlace/1/q/100" width="100px" height="100px" /></a>
                        <a target="_blank" href="/Home/Detail?goodid={{orderRe.goodId}}" class="product_name">{{orderRe.goodName}}-{{orderRe.packName}}</a>
                    </td>
                    <td>{{orderRe.goodPrice}}</td>
                    <td>{{orderRe.count}}</td>
                    <td><i>￥</i>{{orderRe.price}}</td>
                    {{if item.order.statusName == '已收货' && orderRe.commentId == null }}
                    <!--//TODO:转到评论链接-->
                    <td colspan="1"><a href="/GoodComment/Comment?orderRecordId={{orderRe.id}}">去评论</a></td>
                    {{else if orderRe.commentId != null }}
                    <!--//TODO:转到评论链接-->
                    <td colspan="1"><a href="/User/UserComment">查看评论</a></td>
                    {{else if item.order.statusName == '未付款'}}
                    <td colspan="1"><a href="/Order/Detailed?OrderId={{item.order.id}}">{{item.order.statusName}}</a></td>
                    {{else}}
                    <td colspan="1">{{item.order.statusName}}</td>
                    {{/if}}
                </tr>
                {{/each}}
            </tbody>
        </table>


        {{/each}}
    </script>
    <script type="text/javascript">

        var count = @ViewBag.OrderCount;

        layui.config({
            base: "js/"
        }).use(['layer', 'laypage'], function () {
            var layer = parent.layer === undefined ? layui.layer : parent.layer,
                laypage = layui.laypage;
            function loadOrderData(curr) {
                var index = layer.msg('订单加载中，请稍候', { icon: 16, time: false, shade: 0.8 });
                $.ajax({
                    type: "post",
                    dataType: "json",
                    url: "/User/UserOrder",
                    data: { currentIndex: curr },
                    success: function (res) {

                        if (res.status == "ok") {

                            layer.close(index);

                            var html = template(("order_template"), { data: res.data });

                            $(".order_content").html(html);



                        } else {
                            layer.msg(res.errorMsg, { icon: 5 });
                        }


                    },
                    error: function () {
                        layer.msg("网络请求失败", { icon: 5 });
                    }
                });
            }

            $(function () {
                loadOrderData(1);
            });


            laypage.render({
                elem: 'page',
                count: count, //总页数
                limit:2,
                groups: 5, //连续显示分页数

                jump: function (obj, first) {
                    //得到了当前页，用于向服务端请求对应数据
                    var curr = obj.curr; // 获取当前页数下标

                    if (!first) {
                        loadOrderData(curr);
                    }
                }
            });
        });

    </script>
}